<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Drawing in Tkinter</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, drawing, Tkinter, Python">
<meta name="description" content="This part of the Tkinter tutorial covers drawing.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container2">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content2">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Drawing</h1>

<p>
In this part of the Tkinter tutorial we will do some drawing. Drawing in Tkinter is
done on the <code>Canvas</code> widget. Canvas is a high level facility for graphics
in Tkinter.
</p>

<div class="big_hor">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* big_horizontal */
google_ad_slot = "2904953388";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


<p>
It can be used to create charts, custom widgets or create games.
</p>


<h2>Colors</h2>

<p>
A color is an object representing a combination of 
Red, Green, and Blue (RGB) intensity values. 
</p>

<pre class="code">
#!/usr/bin/python
# -*- coding: utf-8 -*-

"""
ZetCode Tkinter tutorial

This program draws three
rectangles filled with different
colors.

author: Jan Bodar
last modified: January 2011
website: www.zetcode.com
"""

from Tkinter import Tk, Canvas, Frame, BOTH


class Example(Frame):
  
    def __init__(self, parent):
        Frame.__init__(self, parent)   
         
        self.parent = parent        
        self.initUI()
        
    def initUI(self):
      
        self.parent.title("Colors")        
        self.pack(fill=BOTH, expand=1)

        canvas = Canvas(self)
        canvas.create_rectangle(30, 10, 120, 80, 
            outline="#fb0", fill="#fb0")
        canvas.create_rectangle(150, 10, 240, 80, 
            outline="#f50", fill="#f50")
        canvas.create_rectangle(270, 10, 370, 80, 
            outline="#05f", fill="#05f")            
        canvas.pack(fill=BOTH, expand=1)


def main():
  
    root = Tk()
    ex = Example(root)
    root.geometry("400x100+300+300")
    root.mainloop()  


if __name__ == '__main__':
    main()  
</pre>

<p>
In the code example, we  draw three rectangles and fill them with
different color values.
</p>

<pre class="explanation">
canvas = Canvas(self)
</pre>

<p>
We create the <code>Canvas</code> widget.
</p>

<pre class="explanation">
canvas.create_rectangle(30, 10, 120, 80, 
    outline="#fb0", fill="#fb0")
</pre>

<p>
The <code>create_rectangle()</code> creates a rectangle item
on the canvas. The first four parameters are the x,y coordinates
of the two bounding points. The top-left and the bottom-right. 
With the <code>outline</code> parameter we control the color of 
the outline of the rectangle. Likewise, the <code>fill</code>
parameter provides a color for the inside of the rectangle. 
</p>

<img src="/img/gui/tkinter/colors.png" alt="Colors">
<div class="figure">Figure: Colors</div>



<h2>Shapes</h2>

<p>
We can draw various shapes on the Canvas. 
The following code example will show some of them. 
</p>

<pre class="code">
#!/usr/bin/python
# -*- coding: utf-8 -*-

"""
ZetCode Tkinter tutorial

In this script, we draw basic 
shapes on the canvas.

author: Jan Bodar
last modified: January 2011
website: www.zetcode.com
"""

from Tkinter import Tk, Canvas, Frame, BOTH


class Example(Frame):
  
    def __init__(self, parent):
        Frame.__init__(self, parent)   
         
        self.parent = parent        
        self.initUI()
        
    def initUI(self):
      
        self.parent.title("Shapes")        
        self.pack(fill=BOTH, expand=1)

        canvas = Canvas(self)
        canvas.create_oval(10, 10, 80, 80, outline="red", 
            fill="green", width=2)
        canvas.create_oval(110, 10, 210, 80, outline="#f11", 
            fill="#1f1", width=2)
        canvas.create_rectangle(230, 10, 290, 60, 
            outline="#f11", fill="#1f1", width=2)
        canvas.create_arc(30, 200, 90, 100, start=0, 
            extent=210, outline="#f11", fill="#1f1", width=2)
            
        points = [150, 100, 200, 120, 240, 180, 210, 
            200, 150, 150, 100, 200]
        canvas.create_polygon(points, outline='red', 
            fill='green', width=2)
        
        canvas.pack(fill=BOTH, expand=1)


def main():
  
    root = Tk()
    ex = Example(root)
    root.geometry("330x220+300+300")
    root.mainloop()  


if __name__ == '__main__':
    main()  
</pre>

<p>
We draw five different shapes on the window. A circle, an ellipse, 
a rectangle, an arc and a polygon. Outlines are drawn in red,
insides in green. The width of the outline is 2px.
</p>

<pre class="explanation">
canvas.create_oval(10, 10, 80, 80, outline="red", 
        fill="green", width=2)
</pre>

<p>
Here the <code>create_oval()</code> method is used to create a circle
item. The first four parameters are the bounding box coordinates of
the circle. In other words, they are x, y coordinates of the top-left 
and bottom-right points of the box, in which the circle is drawn. 
</p>

<pre class="explanation">
canvas.create_rectangle(230, 10, 290, 60, 
    outline="#f11", fill="#1f1", width=2)
</pre>

<p>
We create a rectangle item. The coordinates are again the bounding box 
of the rectangle to be drawn. 
</p>

<pre class="explanation">
canvas.create_arc(30, 200, 90, 100, start=0, 
    extent=210, outline="#f11", fill="#1f1", width=2)
</pre>

<p>
This code line creates an arc. An arc is a part of the circumference of
the circle. We provide the bounding box. The <code>start</code> parameter
is the start angle of the arc. The <code>extent</code> is the angle size.
</p>

<pre class="explanation">
points = [150, 100, 200, 120, 240, 180, 210, 
    200, 150, 150, 100, 200]
canvas.create_polygon(points, outline='red', 
    fill='green', width=2)
</pre>

<p>
A polygon is created. It is a shape with multiple corners. To create a
polygon in Tkinter, we provide the list of polygon coordinates to the
<code>create_polygon()</code> method.
</p>


<img src="/img/gui/tkinter/shapes.png" alt="Shapes">
<div class="figure">Figure: Shapes</div>



<h2>Drawing image</h2>

<p>
In the following example we will create an image item on the canvas.
</p>

<pre class="code">
#!/usr/bin/python
# -*- coding: utf-8 -*-

"""
ZetCode Tkinter tutorial

In this script, we draw an image
on the canvas.

author: Jan Bodar
last modified: December 2010
website: www.zetcode.com
"""

from Tkinter import Tk, Canvas, Frame, BOTH, NW
import Image 
import ImageTk

class Example(Frame):
  
    def __init__(self, parent):
        Frame.__init__(self, parent)   
         
        self.parent = parent        
        self.initUI()
        
    def initUI(self):
      
        self.parent.title("High Tatras")        
        self.pack(fill=BOTH, expand=1)
        
        self.img = Image.open("tatras.jpg")
        self.tatras = ImageTk.PhotoImage(self.img)

        canvas = Canvas(self, width=self.img.size[0]+20, 
           height=self.img.size[1]+20)
        canvas.create_image(10, 10, anchor=NW, image=self.tatras)
        canvas.pack(fill=BOTH, expand=1)


def main():
  
    root = Tk()
    ex = Example(root)
    root.mainloop()  


if __name__ == '__main__':
    main()  
</pre>

<p>
We display an image on the canvas. 
</p>

<pre class="explanation">
self.img = Image.open("tatras.jpg")
self.tatras = ImageTk.PhotoImage(self.img)
</pre>

<p>
Tkinter does not support jpg images internally. As a workaround, we
use the Image and ImageTk modules.
</p>

<pre class="explanation">
canvas = Canvas(self, width=self.img.size[0]+20, 
    height=self.img.size[1]+20)
</pre>

<p>
We create the <code>Canvas</code> widget. It takes the size of the image
into account. It is 20px wider and 20px higher than the actual image size.
</p>

<pre class="explanation">
canvas.create_image(10, 10, anchor=NW, image=self.tatras)
</pre>

<p>
We use the <code>create_image()</code> method to create an image item
on the canvas. To show the whole image, it is anchored to the north and
to the west. The <code>image</code> parameter provides the photo image 
to display.
</p>


<h2>Drawing text</h2>

<p>
In the last example, we are going to draw text
on the window. 
</p>

<pre class="code">
#!/usr/bin/python
# -*- coding: utf-8 -*-

"""
ZetCode Tkinter tutorial

In this script, we draw text
on the window.

author: Jan Bodar
last modified: December 2010
website: www.zetcode.com
"""

from Tkinter import Tk, Canvas, Frame, BOTH, W


class Example(Frame):
  
    def __init__(self, parent):
        Frame.__init__(self, parent)   
         
        self.parent = parent        
        self.initUI()
        
    def initUI(self):
      
        self.parent.title("Lyrics")        
        self.pack(fill=BOTH, expand=1)

        canvas = Canvas(self)
        canvas.create_text(20, 30, anchor=W, font="Purisa",
            text="Most relationships seem so transitory")
        canvas.create_text(20, 60, anchor=W, font="Purisa",
            text="They're good but not the permanent one")
        canvas.create_text(20, 130, anchor=W, font="Purisa",
            text="Who doesn't long for someone to hold")
        canvas.create_text(20, 160, anchor=W, font="Purisa",
            text="Who knows how to love without being told")                   
        canvas.create_text(20, 190, anchor=W, font="Purisa",
            text="Somebody tell me why I'm on my own")            
        canvas.create_text(20, 220, anchor=W, font="Purisa",
            text="If there's a soulmate for everyone")               
        canvas.pack(fill=BOTH, expand=1)


def main():
  
    root = Tk()
    ex = Example(root)
    root.geometry("420x250+300+300")
    root.mainloop()  


if __name__ == '__main__':
    main()  
</pre>

<p>
We draw a lyrics of a song on the window. 
</p>

<pre class="explanation">
canvas.create_text(20, 30, anchor=W, font="Purisa",
    text="Most relationships seem so transitory")
</pre>

<p>
The first two parameters are the x, y coordinates of the
<b>center</b> point of the text. If we anchor the text item
to the west, the text starts from this position. The <code>font</code>
parameter provides the font of the text and the <code>text</code>
parameter is the text to be displayed. 
</p>


<img src="/img/gui/tkinter/lyrics.png" alt="Drawing text">
<div class="figure">Figure: Drawing text</div>


<p>
In this part of the Tkinter tutorial, we did some drawing.
</p>

<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>

<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified January 10, 2011  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

